<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
              <a-input v-model="model.name"  placeholder="请输入名称"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="公式位置" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="position">
              <j-dict-select-tag type="list" v-model="model.position" dictCode="formula_position"
                                 placeholder="请选择公式位置" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row v-if="model.position === '0'">
          <a-col :span="24">
            <a-form-model-item label="公式" :labelCol="textareaLabelCol" :wrapperCol="textareaWrapperCol" prop="gs">
              <a-textarea v-model="model.gs" rows="4" placeholder="请输入公式" ref="textarea"  @blur="handleBlur" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-space wrap>
              <a-button type="dashed" @click="addMd('[原料密度]')">原料密度</a-button>
              <a-button type="dashed" @click="addPd('[Planned Dosing]')">Planned Dosing</a-button>
              <a-button type="dashed" @click="fg('(')">(</a-button>
              <a-button type="dashed" @click="fg(')')">)</a-button>
              <a-button type="dashed" @click="fg('+')">+</a-button>
              <a-button type="dashed" @click="fg('-')">-</a-button>
              <a-button type="dashed" @click="fg('*')">×</a-button>
              <a-button type="dashed" @click="fg('/')">÷</a-button>
              <a-button type="dashed" @click="clearGs()">清空</a-button>
            </a-space>
          </a-col>
        </a-row>
        <a-row v-else-if="model.position === '1'">
          <a-col :span="24">
            <a-form-model-item label="公式" :labelCol="textareaLabelCol" :wrapperCol="textareaWrapperCol" prop="gs">
              <a-textarea v-model="model.gs" rows="4" placeholder="请输入公式" ref="textarea"  @blur="handleBlur" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-space wrap>
              <a-button type="dashed" @click="addSf('[原料水分]')">原料水分</a-button>
              <a-button type="dashed" @click="addCFC('[Crutcher FC]')">Crutcher FC</a-button>
              <a-button type="dashed" @click="addLjyz('[料浆因子]')">料浆因子</a-button>
              <a-button type="dashed" @click="addWater('[Water]')">Water</a-button>
              <a-button type="dashed" @click="addSolids('[Solids]')">Solids</a-button>
              <a-button type="dashed" @click="addPd('[Planned Dosing]')">Planned Dosing</a-button>
              <a-button type="dashed" @click="addGt('[固体总和]')">固体总和</a-button>
              <a-button type="dashed" @click="addCmm('[Crutcher CMM]')">Crutcher CMM</a-button>
              <a-button type="dashed" @click="addTotalCFC('[Crutcher FC总和（除工艺水）]')">Crutcher FC总和（除工艺水）</a-button>
            </a-space>
            <a-space>
              <a-button type="dashed" @click="fg('(')">(</a-button>
              <a-button type="dashed" @click="fg(')')">)</a-button>
              <a-button type="dashed" @click="fg('+')">+</a-button>
              <a-button type="dashed" @click="fg('-')">-</a-button>
              <a-button type="dashed" @click="fg('*')">×</a-button>
              <a-button type="dashed" @click="fg('/')">÷</a-button>
              <a-button type="dashed" @click="clearGs()">清空</a-button>
            </a-space>
          </a-col>
        </a-row>
        <a-row v-else-if="model.position === '2'">
          <a-col :span="24">
            <a-form-model-item label="公式" :labelCol="textareaLabelCol" :wrapperCol="textareaWrapperCol" prop="gs">
              <a-textarea v-model="model.gs" rows="4" placeholder="请输入公式" ref="textarea"  @blur="handleBlur" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-space wrap>
              <a-button type="dashed" @click="addHrgt('[回溶固体]')">回溶固体</a-button>
              <a-button type="dashed" @click="addHrs('[回溶水]')">回溶水</a-button>
              <a-button type="dashed" @click="addSolids('[Solids]')">Solids</a-button>
              <a-button type="dashed" @click="addLjyz('[料浆因子]')">料浆因子</a-button>
              <a-button type="dashed" @click="addTpd('[TotalPlannedDosing]')">Planned Dosing的和</a-button>
              <a-button type="dashed" @click="addTs('[TotalSolids]')">Solids的和</a-button>
              <a-button type="dashed" @click="addCmm('[Crutcher CMM]')">Crutcher CMM</a-button>
              <a-button type="dashed" @click="addTotalCFC('[Crutcher FC总和（除工艺水）]')">Crutcher FC总和（除工艺水）</a-button>
            </a-space>
            <a-space>
              <a-button type="dashed" @click="fg('(')">(</a-button>
              <a-button type="dashed" @click="fg(')')">)</a-button>
              <a-button type="dashed" @click="fg('+')">+</a-button>
              <a-button type="dashed" @click="fg('-')">-</a-button>
              <a-button type="dashed" @click="fg('*')">×</a-button>
              <a-button type="dashed" @click="fg('/')">÷</a-button>
              <a-button type="dashed" @click="clearGs()">清空</a-button>
            </a-space>
          </a-col>
        </a-row>
        <a-row v-else-if="model.position === '3'">
          <a-col :span="24">
            <a-form-model-item label="公式" :labelCol="textareaLabelCol" :wrapperCol="textareaWrapperCol" prop="gs">
              <a-textarea v-model="model.gs" rows="4" placeholder="请输入公式" ref="textarea"  @blur="handleBlur" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-space wrap>
              <a-button type="dashed" @click="addZppl('[整批配料]')">整批配料</a-button>
              <a-button type="dashed" @click="addPfbl('[配方比例]')">配方比例</a-button>
              <a-button type="dashed" @click="addPfkbl('[配方卡比例]')">配方卡比例</a-button>
              <a-button type="dashed" @click="addZpzh('[整批总和]')">整批总和</a-button>
              <a-button type="dashed" @click="addBpzh('[半批总和]')">半批总和</a-button>
              <a-button type="dashed" @click="addPfkblzh('[配方卡比例总和]')">配方卡比例总和</a-button>
              <a-button type="dashed" @click="fg('(')">(</a-button>
              <a-button type="dashed" @click="fg(')')">)</a-button>
              <a-button type="dashed" @click="fg('+')">+</a-button>
              <a-button type="dashed" @click="fg('-')">-</a-button>
              <a-button type="dashed" @click="fg('*')">×</a-button>
              <a-button type="dashed" @click="fg('/')">÷</a-button>
              <a-button type="dashed" @click="clearGs()">清空</a-button>
            </a-space>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'

  export default {
    name: 'EneRecipeFormulaForm',
    components: {
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        test:true,
        model: {position:'0', code: '', gs: ''},
        cursorPosition:0,
        labelCol: {
          xs: {span: 24},
          sm: {span: 5},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16},
        },
        textareaLabelCol: {
          xs: {span: 24},
          sm: {span: 5},
        },
        textareaWrapperCol: {
          xs: {span: 24},
          sm: {span: 16},
        },
        confirmLoading: false,
        validatorRules: {
          name: [
            {required: true, message: '请输入名称'}
          ],
          gs: [{required: true, message: '请输入公式'}]
        },
        url: {
          add: "/craft/eneRecipeFormula/add",
          edit: "/craft/eneRecipeFormula/edit",
          queryById: "/craft/eneRecipeFormula/queryById"
        }
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    watch:{
      'model.gs': {
        handler: function (newValue, oldValue) {
          // do something
          this.model.gs = newValue.replace(/[^\d.+*/()\[\]-]|(\[[^\]]*\])/g, '$1');
        },
        deep: true
      }
    },
    methods: {
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
         
        })
      },
      handleBlur(event) {
        var elem = event.relatedTarget || event.srcElement || event.target ||event.currentTarget;
        console.log("获得的键",event)
        if(event.keyCode===8){//判断按键为backSpace键
          //
          return ;
        }
        this.cursorPosition = event.srcElement.selectionStart;
        console.log(this.cursorPosition)
      },
      fg(content) {
        this.insertText(content)
      },
      addMd(){
        this.insertText('[原料密度]')
      },
      addPd(){
        this.insertText('[Planned Dosing]')
      },
      addSf(){
        this.insertText('[原料水分]')
      },
      addCFC(){
        this.insertText('[Crutcher FC]')
      },
      addLjyz(){
        this.insertText('[料浆因子]')
      },
      addCmm(){
        this.insertText('[Crutcher CMM]')
      },
      addWater(){
        this.insertText('[Water]')
      },
      addSolids(){
        this.insertText('[Solids]')
      },
      addGt(){
        this.insertText('[固体总和]')
      },
      addTotalCFC(){
        this.insertText('[Crutcher FC总和(除工艺水)]')
      },
      addHrgt(){
        this.insertText('[回溶固体]')
      },
      addHrs(){
        this.insertText('[回溶水]')
      },
      addZppl(){
        this.insertText('[整批配料]')
      },
      addPfbl(){
        this.insertText('[配方比例]')
      },
      addPfkbl(){
        this.insertText('[配方卡比例]')
      },
      addZpzh(){
        this.insertText('[整批总和]')
      },
      addBpzh(){
        this.insertText('[半批总和]')
      },
      addPfkblzh(){
        this.insertText('[配方卡比例总和]')
      },
      addTpd(){
        this.insertText('[TotalPlannedDosing]')
      },
      addTs(){
        this.insertText('[TotalSolids]')
      },
      insertText(text) {
        this.model.gs =
          this.model.gs.substring(0, this.cursorPosition) +
          text +
          this.model.gs.substring(this.cursorPosition);
        this.cursorPosition = this.cursorPosition + text.length
      },
      clearGs(){
        this.model.gs = ''
      },
    }
  }
</script>